<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-row :gutter="10">
          <el-col :span="12">
            <dashboard-card
              height="316"
              :icon="require('@/assets/icon/com.png')"
              title="操作系统"
            >
              <chart-pie ref="sys" />
            </dashboard-card>
          </el-col>
          <el-col :span="12">
            <dashboard-card
              height="316"
              :icon="require('@/assets/icon/project.png')"
              title="绑定进度"
            >
              <chart-gauge ref="bind" />
            </dashboard-card>
          </el-col>
          <el-col :span="12">
            <dashboard-card
              class="mt10"
              height="316"
              :icon="require('@/assets/icon/protect.png')"
              title="监控状态"
            >
              <chart-pie ref="monitor" />
            </dashboard-card>
          </el-col>
          <el-col :span="12">
            <dashboard-card
              class="mt10"
              height="316"
              :icon="require('@/assets/icon/pro.png')"
              title="主动防御状态"
            >
              <chart-pie ref="state" />
            </dashboard-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <dashboard-card
          height="700"
          :icon="require('@/assets/icon/tency.png')"
          title="终端接入趋势"
        >
          <chart-line ref="ChartLine" />
        </dashboard-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DashboardCard from "@/views/menace/components/dashboardCard";
import ChartPie from "@/components/charts/ChartPie";
import ChartLine from "@/components/charts/ChartLine";
import ChartGauge from "@/components/charts/ChartGauge";
import agent from "@/api/agent";
export default {
  name: "Terminal",
  components: { ChartGauge, ChartLine, ChartPie, DashboardCard },
  mounted() {
    this.loadingData();
  },
  methods: {
    loadingData() {
      agent.total().then(res => {
        this.drawOs(res.data.os_pie);
        this.drawMonitor(res.data.monitor_pie);
        this.drawProtect(res.data.protect_pie);
        let bind_data = res.data.bind_pie;
        let bind_pie = {
          value: (
            (bind_data[0].value / (bind_data[0].value + bind_data[1].value)) *
            100
          ).toFixed(2),

          detail: {
            valueAnimation: false,
            offsetCenter: ["0%", "40%"]
          }
        };

        bind_pie = {
          value: Number(
            (
              (bind_data[0].value / (bind_data[0].value + bind_data[1].value)) *
              100
            ).toFixed(2)
          ),

          title: {
            offsetCenter: ["0%", "-10%"]
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "6%"]
          }
        };
        this.$refs.bind.created([bind_pie]);
        this.$refs.ChartLine.created({
          xAxis: {
            type: "category",
            data: res.data.access_trend.x_data
          },
          axisLabel: {
            show: true,
            interval: 0, //使x轴文字显示全
            formatter: function(params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 4; //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            }
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              data: res.data.access_trend.series,
              type: "line"
            }
          ]
        });
      });
    },
    drawOs(data) {
      const pie = {
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      this.$refs.sys.created(pie);
    },
    drawProtect(data) {
      const pie = {
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      this.$refs.state.created(pie);
    },
    drawMonitor(data) {
      const pie = {
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      this.$refs.monitor.created(pie);
    }
  }
};
</script>

<style scoped></style>
